<template>
    <div>
      <vol-box
        :lazy="true"
        :model.sync="model"
        title="订单详情"
        :height="700"
        :width="900"
        :padding="25"
      >
      <div id="printTest" >	
      <el-row>
          <el-col :span="24">
            <div
              class="grid-content "
              style="height: 80px;">
              <div class="top">
                  <div class="top1">
                      <div style="font-size: 30px;">
                        {{data.ticketsCode}}
                      </div>
                      <div  style="font-size: 15.5px;">
                        {{data.distributionChannels}}
                      </div>
                  </div>
                  <div  class="top1">
                      <img id="barcode" />
                  </div>
              </div>
              <div class="top2" >
                {{data.status}}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row style="border:1px solid #000">
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <div class="grid-content">订单号：{{data.order_number}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">下单时间：{{data.pay_time}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content">预定人姓名：{{this.data.bookingName}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">手机号：{{data.bookingPhone}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">证件类型：{{
              
             data.certificate_type==null?"":data.certificate_type==""?"": data.certificate_type==1?"身份证":( data.certificate_type==2?"护照":data.certificate_type==3?"军人证件":"残疾证件")
              }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">证件号：{{data.id_card}}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div
              class="grid-content"
              style="height:20px;width: 130px; background-color:hsl(0, 0%, 99%);"
            >
              <b>
                <span style="font-size: 17px;">订单信息:</span>
              </b>
            </div>
          </el-col>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content">预定类型：{{data.reservationType}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">分销渠道：{{data.distributionChannels}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">分销ID：{{data.distributionID}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">操作员：{{data.operator1}}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content">会员类型：{{data.memberType}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">是否会员价：{{data.isMemberPrice}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">短信发送：{{data.usSms}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">取消时间：{{data.cancelTime}}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content">订单金额：{{data.order_total_price}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">商品金额：{{data.cancePrice}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">押金金额：{{data.paydepositPrice}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">支付时间：{{data.paymentTime}}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content">获得积分：{{data.earnPoints}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">使用积分：{{data.usePoints}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">押金状态：{{data.depositAmount}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">结算时间：{{data.settlementTime}}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content">使用卡权益：{{data.useCardRights}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">卡号：{{data.cardNumber}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">使用优惠券：{{data.useCoupon}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">券号：{{data.couponNumber}}</div>
            </el-col>
          </el-row>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div
              class="grid-content bg-purple-dark"
              style="height:20px;width: 130px; background-color: hsl(0, 0%, 99%);"
            >
              <b>
                <span style="font-size: 17px;">项目信息:</span>
              </b>
            </div>
          </el-col>
          
          
        </el-row>
        <el-row>
          <div :style="{margin:'0 left'}" >
          <el-table border :data="list" min-width="100%" show-summary :summary-method="getSummaries"
          max-height="500" :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          default-expand-all row-key="childrenNumber"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <!-- //<el-table-column type="index" min-width="62%" ></el-table-column> -->
          <el-table-column prop="playStartDate" label="开始日期" min-width="14%"></el-table-column>
          <el-table-column prop="playEndDate" label="结束日期" min-width="14%"></el-table-column>
          <el-table-column prop="productName" label="产品名称" min-width="15%"></el-table-column>
          <el-table-column prop="confirmationNo" label="确认号" min-width="15%"></el-table-column>
          <el-table-column prop="userName" label="使用人" min-width="15%"></el-table-column>
          <el-table-column prop="userPhone" label="手机号" min-width="17%"></el-table-column>
          <el-table-column prop="price" label="单价" min-width="7%"></el-table-column>
          <el-table-column prop="paydepositPrice" label="押金" min-width="7%"></el-table-column>
          <el-table-column prop="num" label="数量" min-width="7%"></el-table-column>
          <el-table-column prop="isTake" label="状态" min-width="10%"></el-table-column>
        </el-table>
      </div>
        </el-row>
         </div>
         <div slot="footer"
           class>
        <Button  type="info" v-print="printObj">打印</Button>
        <Button type="info" ghost @click="close">关闭</Button>
      </div>
       
      </vol-box>
    </div>
  </template>      
  
  <script>
  import VolBox from "@/components/basic/VolBox.vue";
  import VolForm from "@/components/basic/VolForm.vue";
  import JsBarcode from 'jsbarcode'
  //import https from '..';
  export default {
    components: { "vol-box": VolBox, VolForm },
    data() {
      return {
        printObj: {
                id: "printTest",
                popTitle: '订单详情',
               
              },
        loadKey: true,
        row: {},
        //url: "api/App_Expert/getPageData", //后从加载数据的url
        model: false,
        list: [],
        data:{}
        
      };
    },
    methods: {
      getSummaries(param) {
          const { columns, data } = param;
          const sums = [];
          columns.forEach((column, index) => {
            if(column.label=="单价"||column.label=="押金"||column.label=="数量"||index==0){
            if (index === 0) {
              sums[index] = '总价';
              return;
            }
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
              sums[index] += ' ';
            } else {
              sums[index] = 'N/A';
            }
            }
          });
          sums[6]= Number(sums[6]).toFixed(2)
          return sums;
        },
      open(row) {
        //console.log(row);
        //this.data=row;
        
        this.http.post("/api/VSmallOrders/GetOrderDetails?id="+row.id,"",false).then(x=>{
  
          this.data=x.data;
          this.list=x.data.orderDetailItems;
           JsBarcode('#barcode', x.data.ticketsCode, {
            format: 'CODE128',
            lineColor: '#000',
            width: 2,
            height: 50,
            displayValue: false
          })
      })
      this.model = true;
      },
       close() {
         //console.log("关闭")
         this.model = false;
        //this.$refs.close();
        //  this.tableData.close();
        //this.$refs.table.close();
      },
    },
    
    mounted() {
      
    }
  };
  </script>
  <style>
  #printTest .el-table__row--level-0{
    background-color: #ccc !important;
  }
  #printTest .el-table__row--level-0:hover>td.el-table__cell{
    background-color: #ccc !important;
  }
  
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: hsl(206, 20%, 93%);
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .top1 {
    font-size: 20px;
    float: left;
   }
   
  .top {
     font-weight:bold;
    }
  .top2 {
   font-weight:bold;
   float: right; 
   font-size: 25px; 
   margin-right: 60px;
   margin-top: 10px;
    }
  </style>